import React, { useState, useEffect } from 'react';
import './Modal.css';

const CreateProjectModal = ({ isOpen, onClose, onSubmit, projectGroups }) => {
  const [project, setProject] = useState({
    name: '',
    projectId: '',
    groupId: '',
    description: ''
  });

  // 当弹窗打开时，如果有项目组，默认选择第一个
  useEffect(() => {
    if (isOpen && projectGroups && projectGroups.length > 0 && !project.groupId) {
      setProject(prev => ({
        ...prev,
        groupId: projectGroups[0].id
      }));
    }
  }, [isOpen, projectGroups]);

  const handleChange = (e) => {
    const { name, value } = e.target;
    setProject(prev => ({
      ...prev,
      [name]: value
    }));
  };

  const handleSubmit = (e) => {
    e.preventDefault();
    onSubmit(project);
    // 重置表单
    setProject({ name: '', projectId: '', groupId: '', description: '' });
  };

  if (!isOpen) return null;

  return (
    <div className="modal-overlay">
      <div className="modal-container">
        <div className="modal-header">
          <h2>创建项目</h2>
          <button className="close-button" onClick={onClose}>×</button>
        </div>
        <form onSubmit={handleSubmit}>
          <div className="modal-body">
            <div className="form-group">
              <label htmlFor="groupId">所属项目组</label>
              <select
                id="groupId"
                name="groupId"
                value={project.groupId}
                onChange={handleChange}
                required
              >
                <option value="">请选择项目组</option>
                {projectGroups && projectGroups.map(group => (
                  <option key={group.id} value={group.id}>
                    {group.name}
                  </option>
                ))}
              </select>
            </div>
            <div className="form-group">
              <label htmlFor="name">项目名称</label>
              <input
                type="text"
                id="name"
                name="name"
                value={project.name}
                onChange={handleChange}
                required
                placeholder="请输入项目名称"
              />
            </div>
            <div className="form-group">
              <label htmlFor="projectId">项目标识</label>
              <input
                type="text"
                id="projectId"
                name="projectId"
                value={project.projectId}
                onChange={handleChange}
                required
                placeholder="请输入项目标识，如：snake-basic"
              />
            </div>
            <div className="form-group">
              <label htmlFor="description">项目描述</label>
              <textarea
                id="description"
                name="description"
                value={project.description}
                onChange={handleChange}
                placeholder="请输入项目描述"
                rows="4"
              />
            </div>
          </div>
          <div className="modal-footer">
            <button type="button" className="btn-cancel" onClick={onClose}>取消</button>
            <button type="submit" className="btn-submit">确认</button>
          </div>
        </form>
      </div>
    </div>
  );
};

export default CreateProjectModal;
